<script>
export default {
  name: 'my-packet',
  props: {
    btnStr: {
      type: String,
      default: '领取红包',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    packet: Object,
  },
}
</script>

<template>
  <view class="packet-item" :style="{filter: disabled ? 'contrast(130%) brightness(0.7)' : ''}">
    <view class="packet-item-title">
      {{ packet.title }}
    </view>
    <view class="packet-item-amount">
      <view>金额: {{ packet.amount }}</view>
    </view>
    <view class="packet-item-image">
<!--      <image class="red-packet" src="https://www.dingxians.cn/upload/images/packet/ic-red-packet.png"></image>-->
    </view>
    <view class="packet-item-join-num" :style="{visibility: disabled ? 'hidden' : 'visible'}">参与人数:
      {{ packet.receive_num }}/{{ packet.num }}人
    </view>
    <view v-if="!disabled">已领取: {{ packet.receive_amount }}</view>
    <view class="packet-item-btn-receive btn-primary">{{ btnStr }}</view>
  </view>
</template>

<style scoped lang="scss">
.packet-item {
  width: 344rpx;
  height: 474rpx;
  background-image: url("https://www.dingxians.cn/upload/images/packet/bg-packet.png");
  background-size: 100% 100%;
  margin-bottom: 16rpx;
  color: white;
  text-align: center;
  overflow: hidden;

  .packet-item-title {
    margin-top: 16rpx;
    font-size: 36rpx;
    font-weight: bold;
    font-family: 'youshe', serif;
  }

  .packet-item-amount {
    margin-top: 16rpx;
    font-size: 24rpx;
  }

  .packet-item-image {
    margin-top: 80rpx;
    height: 134rpx;

    .red-packet {
      width: 186rpx;
      height: 134rpx;
    }
  }

  .packet-item-join-num {
    font-size: 24rpx;
    margin-top: 4rpx;
  }

  .packet-item-btn-receive {
    text-align: center;
    margin: 14rpx auto 0;
    line-height: 42rpx;
    width: 150rpx;
    height: 42rpx;
    font-size: 22rpx;
    background-size: 100% 100%;
  }
}
</style>